<h1>Hello world!!</h1>

<!-- 基本数据类型的输出 -->
<h3>基本数据类型:</h3>
<ul>
    <li>{{ name }}</li>
    <li>{{ age }}</li>
    <li>{{ married }}</li>
</ul>
<h3>复杂数据类型:</h3>
<!-- 数组类型 -->
<ul>
    <li>{{ names }}</li>
    <li>{{ names[0] }}</li>
</ul>
<ul>
    <!-- 对象类型直接输出,转成文本的 [object Object] -->
    <li>{{ Goods }}</li>
    <li>{{ Goods.Gname }}</li>
    <li>{{ Goods.price }}</li>
</ul>
<h3>双花括号的用法:</h3>
<!-- 支持数学运算符 -->
<h4>·支持数学运算符</h4>
<ul>
    <li>{{ 5 + 2 }}</li>
    <li>{{ 5 - 2 }}</li>
    <li>{{ 5 * 2 }}</li>
    <li>{{ 5 / 2 }}</li>
    <li>{{ 5 % 2 }}</li>
</ul>
<!-- 支持比较运算符 -->
<h4>·支持比较运算符</h4>
<ul>
    <li>{{ age > 30 }}</li>
    <li>{{ age < 29 }}< /li>
    </li>
    <li>{{ age >= 30 }}</li>
    <li>{{ age <= 29 }}< /li>
    </li>
    <li>{{ age == 29 }}</li>
    <li>{{ age != 29 }}</li>
</ul>
<!-- 支持三目运算符 -->
<h4>·支持三目运算符</h4>
<ul>
    <li>{{ age >= 35 ? "中青年" : "青年" }}</li>
    <li>{{ age < 35 ? "青年" : "中青年" }}</li>
</ul>
<!-- 支持逻辑运算符 -->
<h4>·支持逻辑运算符</h4>
<ul>
    <!-- 逻辑与:全真为真,有假为假 -->
    <li>{{ 5 > 2 && 7 > 5 }}</li>
    <li>{{ 5 > 6 && 7 > 5 }}</li>
    <li>{{ 5 > 6 && 7 > 8 }}</li>
    <!-- 逻辑或:有真为真,全假为假 -->
    <li>{{ 5 > 2 || 7 > 5 }}</li>
    <li>{{ 5 > 6 || 7 > 5 }}</li>
    <li>{{ 5 > 6 || 7 > 8 }}</li>
    <!-- 逻辑非 -->
    <li>{{ !true }}</li>
    <li>{{ !false }}</li>
</ul>
<!-- {{}}可以使用对象方法 -->
<h4>·支持使用对象方法</h4>
<ul>
    <li>{{ "hello".toUpperCase() }}</li>
</ul>
<!-- 类中的方法 -->
<h4>·使用类中的方法</h4>
<ul>
    <li>{{ showName() }}</li>
</ul>
<!-- 点击事件-按钮的使用 -->
<h4>·点击事件</h4>
<ul>
    <li>
        <button (click)="showClick()">点击事件</button>
    </li>
</ul>
<!-- 属性的绑定 -->
<h4>·属性的绑定</h4>
<ul>
    <li>
        <h3 title="数据,事件,属性">本节课学习的内容</h3>
    </li>
    <li>
        <h3 [title]="name">员工姓名</h3>
    </li>
</ul>
<!-- 特殊属性 -->
<h4>·特殊属性</h4>
<ul>
    <!-- 等价于原生DOM中 innerText写法 -->
    <div>{{ html }}</div>

    <!-- 原生DOM的 innerHTML会自带html的解析  -->
    <div [innerHTML]="html"></div>
</ul>
<!-- 双向数据绑定 -->
<!-- 
    ·双向数据绑定通常是需要结合<input>标签去使用.
    ·ng中使用[ng-Model]属性进行数据的双向绑定.
    ·在ng是默认不加载双向绑定功能,必须开发人员手动的去开启此功能,
    才能够进行双向绑定数据的实现.
    ·※在全局配置文件<app.module.ts>中配置开启双向绑定的功能.
    ·※配置文件重写后,需要重启服务器
 -->
<h4>·双向数据绑定</h4>
<ul>
    <li>
        <input type="text" [(ngModel)]="name" />
    </li>
    <li>
        {{ name }}
    </li>
</ul>

<!-- 样式属性:class 与 style的使用 -->
<ul>
    <!-- 
        ·动态变化的style 必须是 对象类型的值 
        ·动态类型属性名 不能含有中划线-,所以font-size只能以
        <'font-size'>(字符串)或<fontSzie>(小驼峰)方式写.
    -->
    <li [ngStyle]="{ color: 'red', 'font-size': size + 'px' }">{{ size }}</li>
    <li [ngStyle]="{ color: 'red', fontSize: size + 'px' }">{{ size }}</li>

    <!-- 自增++ 和 复合运算+= 不支持在html中使用 -->
    <!-- [ngClass]支持动态变更样式,值{样式名:true/false} 
        true:样式生效
        false:样式未生效
    -->
    <button (click)="size = size + 1" [ngClass]="{'danger': size>20 && size<30,'success':size>=30}">
        变大
    </button>
</ul>